<template>
  <div>
    <el-dialog title="添加房产" :visible="visproperty" width="80%" @close="celbtn">
      <div class="content">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="经纪" prop="agent">
            <el-select v-model="ruleForm.agent" placeholder="请选择经纪">
              <el-option v-for="item in Agentsdata" :key="item.id" :label="item.name" :value="item.id" />

            </el-select>
          </el-form-item>
          <el-form-item label="分类" prop="region">
            <el-select v-model="ruleForm.category" placeholder="请选择分类">
              <el-option v-for="item in category" :key="item.id" :label="item.title" :value="item.id" />

            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title" />
          </el-form-item>
          <!-- 标签 -->
          <el-form-item label="标签">
            <el-tag
              v-for=" ( tag , index) in ruleForm.tags"
              :key="index"
              closable
              @close="handleClose(index)"
            >{{ tag }}</el-tag>
            <el-input

              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              size="small"
              class="input-new-tag"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
          </el-form-item>
          <el-form-item label="地址">
            <el-cascader
              v-model="ressvalue"
              :options="regionData"
              :props="{value:'label'}"
              @change="handleChange"
            />
          </el-form-item>

          <el-form-item label="价格" prop="price">
            <el-input v-model="ruleForm.price" />
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <quill-editor v-model="ruleForm.content" @blur="$refs.ruleForm.validateField('content')" />
          </el-form-item>
          <el-form-item label="介绍图片">
            <Uploadimage ref="Uploadimage" />
          </el-form-item>
          <el-form-item label="封面">
            <Upload ref="Upload" />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="addproperty">确 定</el-button>
          <el-button @click="celbtn">取 消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Uploadimage from './Uploadimage.vue'
import { getAgentslist } from '@/api/agents'
import { regionData } from 'element-china-area-data'// 省市插件
import { getcategories, postproperty, getperopertydetail, getproperty } from '@/api/property'
export default {
  components: { Uploadimage },
  props: {
    visproperty: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      regionData, // 省市数据
      ressvalue: '',
      inputVisible: false, // 标签输入框显示
      inputValue: '', // 标签输入框的值
      Tagsarr: [], // 标签数组
      Agentsdata: [], // 经纪人列表
      category: [], // 分类列表
      ruleForm: {
        title: '', // 标题
        desc: '', // 描述
        image: '', // 封面
        agent: '', // 经纪的id
        content: '', // 内容
        address: '', // 地址
        price: '', // 价格
        photos: [], // 图片数组
        tags: [], // 标签
        category: ''// 分类id
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  //   获取弹窗下拉列表
  async created() {
    const res = await getAgentslist({ _limit: 100, _start: 0 })
    this.Agentsdata = res.data
    const data = await getcategories({ _limit: 100, _start: 0 })
    this.category = data.data
  },
  methods: {

    // 点击按钮显示输入框
    // 在DOM下一次更新时获取焦点
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 输入框失焦事件和回车事件
    handleInputConfirm() {
      // 把当前的输入框的值接收
      const inputValue = this.inputValue
      //   如果有值就追加进数组里
      if (inputValue) {
        this.ruleForm.tags.push(inputValue)
      }
      console.log(this.ruleForm.tags)
      //   隐藏输入框
      this.inputVisible = false
      //   清空输入框的值
      this.inputValue = ''
    },
    // 删除标签
    handleClose(index) {
      this.ruleForm.tags.splice(index, 1)
    },
    // 确定按钮
    addproperty() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          this.ruleForm.photos = this.$refs.Uploadimage.picturelist
          this.ruleForm.image = this.$refs.Upload.imageUrl
          if (this.ruleForm.id) {
            // 编辑
            await getproperty(this.ruleForm)
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
          } else {
            // 添加
            await postproperty(this.ruleForm)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          }

          this.celbtn()
          //   渲染
          this.$emit('getlist')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取数据详情
    async getputproperty(id) {
      const res = await getperopertydetail(id)
      this.ruleForm = res.data
      //  图片数组路径有问题
      //   this.$refs.Uploadimage.picturelist = res.data.photos
      this.$refs.Upload.imageUrl = res.data.image
    },
    celbtn() {
      this.ruleForm = {
        title: '', // 标题
        desc: '', // 描述
        image: '', // 封面
        agent: '', // 经纪的id
        content: '', // 内容
        address: '', // 地址
        price: '', // 价格
        photos: [], // 图片数组
        tags: [], // 标签
        category: ''// 分类id
      }
      this.$refs.ruleForm.resetFields()
      //   关闭弹窗
      this.$emit('update:visproperty', false)
    },
    // 将获取到的地址数组转为字符串赋值给对象中的地址
    handleChange() {
      this.ruleForm.address = this.ressvalue.join()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
    margin-left: 10px;
  }
 .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  ::v-deep .ql-editor {
      height: 176px;
    }
    .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .content{
      height: 400px;
      overflow: auto;
    }
</style>
